<template>
    <div class="body">
      <div class="box" id="container4">
      </div>
      <el-input v-model="student.name" placeholder="请输入学生姓名" suffix-icon="el-icon-search" style="width: 200px;"
                @keyup.enter.native="load"></el-input>
      <el-button type="primary" style="margin-left: 5px;" @click="load">查询</el-button>
      <div class="box" id="container5">
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入axios
import axios from 'axios'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Echarts4',
    components: {
    },
    data() {
        return {
            pie: [],
            student: {
              name: '',
              city: '',
              major: '',
              enrollmentYear: ''
            },
            citys: [
                {
                    value: '北京',
                    label: '北京'
                }, {
                    value: '上海',
                    label: '上海'
                }, {
                    value: '广州',
                    label: '广州'
                }, {
                    value: '深圳',
                    label: '深圳'
                },
            ],
            majors: [
                {
                    value: '计算机科学',
                    label: '计算机科学'
                }, {
                    value: '物理学',
                    label: '物理学'
                }, {
                    value: '英语文学',
                    label: '英语文学'
                }, {
                    value: '化学工程',
                    label: '化学工程'
                }, {
                    value: '经济学',
                    label: '经济学'
                },

            ],
            years: [
                {
                    value: 2023,
                    label: 2023
                }, {
                    value: 2022,
                    label: 2022
                }, {
                    value: 2021,
                    label: 2021
                }, {
                    value: 2020,
                    label: 2020
                },
            ]
        }
    },
    methods: {
        loadGet() {
            axios.get('http://127.0.0.1:9090/students/echart2').then(res => res.data).then(res => {
                 console.log("222222222222222",res)
                this.drawChartPie(res.data)
            })
        },
        drawChartPie(data) {
            console.log(data)
            var chartDom = document.getElementById('container4');
            // 判断是否已经初始化
            if (echarts.getInstanceByDom(chartDom)) {
                // 已初始化，销毁实例
                echarts.getInstanceByDom(chartDom).dispose();
            }
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '学生专业比例',
                    subtext: '人数比例饼图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '人数',
                        type: 'pie',
                        radius: '50%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);
        },

      /**
       {
       "code": 1,
       "msg": null,
       "data": [
       {
       "id": 1,
       "name": "张三",
       "age": 20,
       "gender": "男",
       "score": 88.5,
       "city": "北京",
       "major": "计算机科学",
       "enrollmentYear": 2023
       }
       ]
       }
       */
      load() {
            axios.get('http://127.0.0.1:9090/students/echart3?name=' + this.student.name).then(res => res.data).then(res => {
                console.log("----------name---------",res)
                this.chart(res.data)
            })
        },
        chart(data) {
            console.log("=======data.socre========",data[0].score)
            var chartDom = document.getElementById('container5');
            // 判断是否已经初始化
            if (echarts.getInstanceByDom(chartDom)) {
                // 已初始化，销毁实例
                echarts.getInstanceByDom(chartDom).dispose();
            }
            var myChart = echarts.init(chartDom);
            var option = {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    series: [
                        {
                            name:data[0].name+ '成绩',
                            type: 'gauge',
                            detail: {
                                formatter: '{value}'
                            },
                            data: [
                                {
                                    value: data[0].score,
                                    name: '成绩'
                                }
                            ]
                        }
                    ]
                };

           option  && myChart.setOption(option);
        }
    },
    mounted() {
        this.loadGet();
    }

}
</script>

<style>
.body {
    height: 100vh;
    /* 弹性盒子模型 */
    justify-content: center;
    align-items: center;

}

.box {
    width: 100%;
    height: 600px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>
